<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度地图获取地址</title>
<style>
#resultSpan span,#resultDiv span{
display: block;
}
#srcAddress{
width: 300px;
height: 500px;
}
</style>
</head>
<body onload="load()">
 
<table id="table1">
<tr> <td>功能说明:</td>
        <td>百度地图api,地址信息转换经纬度<br/>
               最大支持500条数据转换,如需更多,设置maxNum数目(网页请另存为下来)<br/>
               点击【地址转换】即可转换<br/>
               点击【转换结果】来看转换数据数目 不相等说明还有数据尚未转换<br/>
               点击【数据重排】可以重新排列顺序( 由于ajax跨域限制原因 使用jsonp 导致非同步)<br/>
               点击转换后结果，可只显示结果信息方便ctrl+a全选复制<br/>
          </td> 
</tr>
<tr><td colspan="2">
<button onclick="adddata()">测试地址数据</button> 
<button onclick="getMainPoints()">地址转换</button>
<button onclick="dataInfo()">转换结果</button>
<button onclick="scorePoints()">数据重排</button>
 
</td>
</tr>
<tr>
     <td>需转换地址<span id="infoSpan"> </span></td>
     <td>转换后地址
         <input type="checkbox" id="checkbox1"  checked="checked" disabled="disabled"></input>地址,
         <input type="checkbox" id="checkbox2"  checked="checked" ></input>纬度(lat),
         <input type="checkbox" id="checkbox3"  checked="checked" ></input>经度(lng),
         <input type="checkbox" id="checkbox4"></input>是否精确查找(1是0否),
         <input type="checkbox" id="checkbox5"></input>可信度,
         <input type="checkbox" id="checkbox6"></input>地址类型
      </td>
</tr>

<tr>
    <td valign="top"><textarea id="srcAddress" > </textarea></td>
    <td valign="top"><span  id="resultSpan"   onclick="triggerResult()"></span> </td>
</tr>
</table>
<div id="resultDiv"  onclick="triggerResult()"></div>
 
<script>
//增加测试数据
function adddata(){
	var simple = "东方明珠广播电视塔\n中国上海浦东新区世纪大道88号 \n上海环球金融中心\n上海豫园\n浦东国际机场";
	document.getElementById("srcAddress").value = simple;
}

var maxNum=500;//最大数目
var num1=0,num2=0;//地址数据
var callbacks = "var _callback";//无意义的占一个位置 下面要去掉第一个的逗号
for(var i=0;i<maxNum;i++){//创建500个变量名用作 函数名
	callbacks +=",callback"+i;
}
eval(callbacks);//声明变量名

//api完整示例 http://api.map.baidu.com/geocoder/v2/?ak=您的密钥&callback=renderOption&output=json&address=百度大厦&city=北京市
var ak = "0D7gWPnl8EOEc4bHgVG6Zhb7";//开发密钥
var geoAPI = "http://api.map.baidu.com/geocoder/v2/";//api地址
var apiUrl = geoAPI+"?output=json&ak="+ak;//输出设定为json数据类型 拼接上密钥
 
var resultSpan,resultDiv,infoSpan;//结果的span
var checkbox2,checkbox3,checkbox4,checkbox5,checkbox6;//选择框

function load(){//页面加载好时候 
	
	//如果在javascript中 未声明也可以直接用id调用 节点元素，不过这里还是声明一下
	table1 = document.getElementById("table1");
	
	resultSpan = document.getElementById("resultSpan");
	resultDiv = document.getElementById("resultDiv");
	infoSpan = document.getElementById("infoSpan");
	
	checkbox2 = document.getElementById("checkbox2");
	checkbox3 = document.getElementById("checkbox3");
	checkbox4 = document.getElementById("checkbox4");
	checkbox5 = document.getElementById("checkbox5");
	checkbox6 = document.getElementById("checkbox6");
	
	
}
  		
function getMainPoints(){
	 
	resultSpan.innerHTML = "";//清空span内容
	num1=0;
	var addresses = document.getElementById("srcAddress").value.split("\n");//换行分割
	var address = "";
	var _eval="";//要运行的代码 动态创建function
	
	 for(var i=0;i<addresses.length;i++){//第一次循环生成 响应的回调函数
		 address = addresses[i].trim();//出去左右括号
		 if(address!=""){//不为""才调用	
			 //callback1=function(response){callback(1,'test',response)}  //动态创建function
			 _eval = "callback"+i+"=function(response){callback("+num1+",'"+address+"',response);}";
			 eval(_eval);
			 doOptions(i,address);//调用api 
			 num1++;//累加
		 }
	 }
}

//i 回调函数序号 a地址
function doOptions(index,address) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = apiUrl+"&callback=callback"+index+"&address="+address;
    document.body.appendChild(script);//载入jsonp
}
 
/**
 * index 序号 point 地点 response api相应的json数据
 */
function callback(index,point,response){
	if (response.status ) {
		point += ",无正确的返回结果"; 	
	}else{
	    var location = response.result.location;
	    if(checkbox2.checked){
	    	point += ","+location.lat ;
	    }
	    if(checkbox3.checked){
	    	point += ","+location.lng;
	    }
	    if(checkbox4.checked){
	    	point += ","+response.result.precise;
	    }
	    if(checkbox5.checked){
	    	point += ","+response.result.confidence;
	    }
	    if(checkbox6.checked){
	    	point += ","+response.result.level;
	    }
	  	
	}
 
	var para=document.createElement("span");//创建一个p元素
	para.id="point_"+index;//设置id
	var node=document.createTextNode(point);//设置内容
	para.appendChild(node);
 
	resultSpan.appendChild(para);//在结果里面追加
}

//数据重排
function scorePoints(){
	
	var point,points="";
	
	for(var i=0;i<maxNum;i++){
		point = document.getElementById("point_"+i)
		if(point){
			points += point.outerHTML;	
		}else{//跳出
		  break;
		}	
	}
	resultSpan.innerHTML=points;
}
//切换显示
function triggerResult(){
	if(table1.style.display!="none"){
		table1.style.display="none";//设置隐藏
		resultDiv.style.display="block";//设置显示
		resultDiv.innerHTML = resultSpan.innerHTML;
	}else{
		table1.style.display="block";//设置隐藏
		resultDiv.style.display="none";//设置显示
		resultDiv.innerHTML = "";//清除数据，以免同名span中同名id照成错误
	}
}
//统计数据
function dataInfo(){
	num2=0;
	for(var i=0;i<maxNum;i++){
		point = document.getElementById("point_"+i)
		if(point){
			num2++;	
		} 
	}
	
	infoSpan.innerHTML = "(源数据:"+num1+",转换数据:"+num2+")";
}

</script>
</body>
</html>